<template>
    <div class="about">
        <img src="/src/assets/avatar.jpg" class="about-avatar"/>
        <h2>卢学文</h2>
        <h4>打杂工程师</h4>
        <!--      <div class="about-item">-->
        <!--        <div>出生年月：</div>-->
        <!--        <div>1996·12</div>-->
        <!--      </div>-->
        <!--      <div class="about-item">-->
        <!--        <div>所在地区：</div>-->
        <!--        <div>广东·广州</div>-->
        <!--      </div>-->
        <!--      <div class="about-item">-->
        <!--        <div>手机号码：</div>-->
        <!--        <div>13612225480</div>-->
        <!--      </div>-->
        <!--      <div class="about-item">-->
        <!--        <div>邮箱地址：</div>-->
        <!--        <div>me@luxuewen.com</div>-->
        <!--      </div>-->
        <p>"Computers do not solve problems, they execute solutions." - Laurent Gasser</p>


    </div>
</template>

<script>
    export default {
        name: "ResumeAbout"
    }
</script>

<style scoped>
    .about {
        min-width: 300px;
        height: 500px;
        padding: 15px;
        border-radius: 3px;
        background-color: #409eff;
        color: white;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin-top: 15px;
        box-shadow: #b3d8ff 0px 0px 15px 5px
    }

    .about h2 {
        margin-top: 12px;
        margin-bottom: 2px;
    }

    .about h4 {
        margin-top: 0;
        margin-bottom: 22px;
    }

    .about-item {
        width: 100%;
        padding: 8px 0;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e8eaec;
    }

    .about .about-item:last-child {
        border-bottom: 1px solid #2d8cf0;
    }


</style>